<style>
  html,body{
    width:100%;
    height:100%;
    margin:0px;
  }
  .login-main {
    width:100%;
    height:100%;
    background: #cccccc;
  }
  .login-con {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 260px;
    width: 260px;
    margin-top: -130px;
    margin-left: -130px;
    background: #fff;
  }
  .from-title {
    position: absolute;
    height: 40px;
    width: 100%;
    margin-top: 30px;
    text-align: center;
    font-size: 20px;
  }
  .login-from {
    position: absolute;
    height: 200px;
    width: 100%;
    margin-top: 80px;
    padding: 0px 20px 20px 20px;
  }
</style>
<template>
    <div class="login-main">
      <div class="login-con">
        <span class="from-title">欢迎登陆</span>
        <div class="login-from">
          <Form ref="loginUser" :model="user" :rules="checkRule">
            <FormItem prop="name">
              <Input type="text" v-model="user.name" placeholder="Username">
              <Icon type="ios-person-outline" slot="prepend"></Icon>
              </Input>
            </FormItem>
            <FormItem prop="password">
              <Input type="password" v-model="user.password" placeholder="Password">
              <Icon type="ios-locked-outline" slot="prepend"></Icon>
              </Input>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="handleSubmit('loginUser')">登陆</Button>
            </FormItem>
          </Form>
        </div>
      </div>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        user: {
          name: '',
          password: ''
        },
        checkRule: {
          name: [
            { required: true, message: 'Please fill in the user name', trigger: 'blur' }
          ],
          password: [
            { required: true, message: 'Please fill in the password.', trigger: 'blur' },
            { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      handleSubmit(name) {
          var fromParams = {
          userName : this.user.name,
          password : this.user.password
        }
          var thisVue = this;
          thisVue.$refs[name].validate(function(valid){
              if (valid) {
                  thisVue.axios.get('api/ssoLogin',{params: fromParams}).then(function (response) {
                      if(response.data.succ){
                          thisVue.$router.push({ path: '/view/HelloWorld' })
                          thisVue.$store.commit('login', response.data.token);
                      }
                },function (response){
                    console.log("获取信息失败");
                    console.log(response);
                });
              } else {
                  return;
              }
          })
      }
    }
  }
</script>


